<template>
	<view class="tbody">
		<view class="head">
			我的建议
		</view>
		<!-- 文本编辑盒子 -->
		<view class="box">
			<view class="box-view">
				500字以内的建议
			</view>
			<!-- 文本域 -->
			<editor placeholder=" " class="380rpx" @blur="blur"></editor>

			<!-- 分割线 -->
			<view class="" style="margin: 40rpx 0 20rpx; border-bottom: 0.5rpx solid #e3eced;height: 0; ">

			</view>
			<!-- 上传图片 -->
			<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple
				:maxCount="10"></u-upload>
			<view class="image">
				最多10照片
			</view>
		</view>
		<!-- 上传按钮	 -->
		<view class="button" @click="appealAdd">
			上传
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL:this.$store.state.user.URL,	
				fileList5: [], //图片回显、
				//回显是数组
				data: {
					images: [] 
				},
				// 上传要把数组转字符串
				obj:{
					content: '', //建议内容
					images: "" //图片，字符串格式
				}
			};
		},
		methods: {
			// editor回显
			blur(html) {
				this.obj.content = html.detail.html
			},
			//新增建议
			appealAdd() {
				// 用定时器调用接口，防止接口拿不到editor里面的内容
				setTimeout(this.fs, 1000)
			},
			async fs() {
				if (this.obj.content.length > 11) {
					// 有内容就放行，然后把图片数组转字符串
					this.obj.images = this.data.images.join(',')
				} else {
					uni.showToast({
						title: '建议内容字数太少！',
						icon: 'none'
					})
					return
				}
				const res = await uni.$http.post('/business/appeal', this.obj)
				if (res.data.code == 200) {
					this.data = {images:[]}
					this.fileList5 = []
					uni.showToast({
						title: '新增成功',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '上传失败！',
						icon: 'none'
					})
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.data.images.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			async uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${this.URL}/appCommon/upload`,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
								console.log(res);
								console.log(res.data);
								// console.log(res.data.url);
								this.data.images.push(`${res.data}`)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 48rpx;
		margin-top: 68rpx;
	}

	.box {
		position: relative;
		padding: 0 32rpx;
		// height: 776rpx;
		border-radius: 20rpx;
		background: #F2FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		padding-top: 32rpx;
		margin-bottom: 144rpx;

		.box-view {
			position: absolute;
			top: 425rpx;
			right: 32rpx;
			z-index: 22;
			font-size: 16rpx;
			font-weight: 400;
			color: #c1c4cb;
		}

		::v-deep .u-textarea__field {
			background-color: #F2FDFF;
		}

		::v-deep .u-textarea {
			padding: 0;
		}

		::v-deep .u-upload__wrap__preview {
			margin-right: 13.5rpx;
			margin-top: 16rpx;
			width: 112rpx !important;
			height: 112rpx !important;
		}

		::v-deep .u-upload__button {
			margin: 0;
			margin-top: 16rpx;
			width: 112rpx !important;
			height: 112rpx !important;
			border-radius: 10px;
			border: 1px dashed #143A40;
			background-color: #f4fdff;
		}

		::v-deep .u-icon__icon {
			// display: none;
			font-size: 0;
		}

		::v-deep .uicon-camera-fill {
			background-image: url('/static/images/加@2x.png');
		}

		.image {
			font-size: 16rpx;
			font-weight: 400;
			color: #c1c4cb;
			text-align: right;
		}

	}

	.button {
		width: 680rpx;
		height: 88rpx;
		border-radius: 60rpx;
		background: #16C1DB;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 88rpx;
		color: rgba(235, 252, 255, 1);
		text-align: center;
	}
</style>